<!--
 * @Author: 周洋 1430536748@qq.com
 * @Date: 2024-07-25 00:31:06
 * @LastEditors: 周洋 1430536748@qq.com
 * @LastEditTime: 2024-08-23 00:02:05
 * @version: 1.2.3
 * @Description: 
-->
<script setup lang="ts">
import useState from '@/hooks/useState';
import { modeProps,Emits } from '../props';
import { SvgIcon } from '../../../SvgIcon'
const { btnLink,btnType, btnText,btnIcon } = defineProps(modeProps);
const [visible, setVisible] = useState(false);
const emit = defineEmits<Emits>();
const slots = useSlots();
//判断footer插槽是否为空
const isFooterSlotEmpty = !slots.footer || !slots.footer?.length;

const onOpen = () => {
    emit('onOpen')
    setVisible(true);
}
const onCancel = () => {
    emit('onCancel')
    setVisible(false);
}
const onOk = (close: () => void) => {
    emit('onOk', close);
}
</script>
<template>
    <el-button auto-insert-space :link="btnLink" :type="btnType" style="outline: none;" @click="onOpen">
        <template #icon>
            <SvgIcon :icon="btnIcon" />
        </template>
        {{ btnText }}
    </el-button>
    <el-drawer  :size="width" v-model="visible" append-to-body :title="title" :direction="direction" :before-close="onCancel" >
        <slot />
        <template #footer>
            <slot name="footer" v-if="isFooterSlotEmpty" />
            <div class="footer" v-else>
                <el-button auto-insert-space :type="cancelType" @click="onCancel">
                    <template #icon v-if="cancelIcon !== null">
                        <SvgIcon :icon="cancelIcon" />
                    </template>
                    {{ cancelText }}
                </el-button>
                <el-button auto-insert-space :type="okType" @click="onOk(onCancel)">
                    <template #icon v-if="okIcon !== null">
                        <SvgIcon :icon="okIcon" />
                    </template>
                    {{ okText }}
                </el-button>
            </div>
        </template>
    </el-drawer>
</template>
<style scoped lang="scss">
:deep(.el-icon) {
    font-size: 28px;
}
</style>